/* ------------------------------------------------------------------------------
 *
 *  # Date paginator
 *
 *  A jQuery plugin which adds date selection to the Bootstrap pagination component
 *
 *  Version: 1.0
 *  Latest update: May 25, 2015
 *
 * ---------------------------------------------------------------------------- */

// Core
// ------------------------------

.datepaginator {
  height: 72px;
  text-align: center;
}

.datepaginator-sm {
  height: 68px;
}

.datepaginator-lg {
  height: 76px;
}

// Pagination styling
// ------------------------------

.datepaginator {
  .pagination {
    white-space: nowrap;

    // List items
    > li {
      display: inline-block;

      // All links
      > a {
        min-width: auto;
        text-align: center;
        border-radius: @border-radius-base;
        margin-left: 0;
        border: 0;
      }

      // Square corners
      .dp-nav-square-edges {
        border-radius: 0;
      }

      // Day off
      .dp-off {
        background-color: #fafafa;
      }

      // No select
      .dp-no-select {
        color: #ccc;
        background-color: #fafafa;

        &:hover {
          background-color: #fafafa;
        }
      }

      // Calendar
      #dp-calendar {
        position: absolute;
        right: 6px;
        top: 6px;
      }

      // Nav arrows
      > .dp-nav {
        height: 72px;
        padding: 29px 0;
        width: 38px;
        line-height: 1;
        border-radius: @border-radius-base;
      }
      > a.dp-nav-sm {
        height: 68px;
        padding: 27px 0;
      }
      > a.dp-nav-lg {
        height: 76px;
        padding: 31px 0;
      }

      // Items
      > a.dp-item {
        height: 72px;
        padding: 15px 0;
        width: 35px;
      }

      > a.dp-item-sm {
        height: 68px;
        padding: 13px 0;
      }
      > a.dp-item-lg {
        height: 76px;
        padding: 17px 0;
      }

      // Dates highlight
      > .dp-today {
        &,
        &:hover,
        &:focus {
          background-color: @brand-primary;
          color: #fff;
        }
      }
      > .dp-selected {
        &,
        &:hover,
        &:focus {
          background-color: @color-teal-400;
          color: #fff;
          width: 140px;
        }
      }
    }
  }
}
